<template>
  <div class="carriaGe-container">
    <!-- 头部 -->
    <div class="head-container">
      <el-card class="box-card">
        车型编号：<el-input
          v-model="id"
          placeholder="请输入车型编号"
          style="
            width: 280px;
            padding: 20px;
            padding-left: 30px;
            padding-right: 30px;
          "
          class="serial-number"
        />
        应载重量：<el-select
          v-model="allowableLoad"
          style="width: 260px; padding-left: 30px; padding-right: 30px"
          placeholder="请选择"
          class="weight"
        >
          <el-option
            v-for="item in allowableLoadList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
        应载体积：<el-select
          v-model="allowableVolume"
          style="width: 260px; padding-left: 30px; padding-right: 30px"
          placeholder="请选择"
          class="bulk"
        >
          <el-option
            v-for="item in allowableVolumeList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
        <div>
          车型类型：<el-input
            v-model="name"
            placeholder="请输入车型类型"
            style="width: 280px; padding-left: 30px; padding-right: 30px"
            class="car-type"
          />
          <el-button
            type="primary"
            style="background-color: #e15536; border: none"
            @click="search"
          >搜索</el-button>
          <el-button plain style="border: 1px solid #999" @click="reset">重置</el-button>
        </div>
      </el-card>
    </div>

    <!-- 内容 -->
    <!-- 表格 -->
    <div class="car-models">
      <el-card class="box-card">
        <el-button
          type="primary"
          style="background-color: #e15536; border: none"
          @click="showDialog=true"
        >
          新增车型
        </el-button>
        <el-table
          :data="list"
          show-header
          style="width: 1300px; margin-bottom: 10px"
          :header-cell-style="{background:'#f8faff'}"
        >
          <!-- 放置列 -->

          <!-- 序号 -->
          <el-table-column align="left" width="50" type="index" label="序号" />

          <!-- 车辆编号 -->
          <el-table-column align="left" width="193" label="车辆编号" prop="id">
            <!-- 自定义列结构 -->
            <!-- <template v-slot="{ row }">
                <span>
                  {{ row.state }}
                </span>
              </template> -->
          </el-table-column>

          <!-- 车辆类型 -->
          <el-table-column
            align="left"
            width="136"
            label="车辆类型"
            prop="name"
          >
            <!-- 自定义列结构 -->
            <!-- <template v-slot="{ row }">
                <span>
                  {{ row.state }}
                </span>
              </template> -->
          </el-table-column>

          <!-- 车辆数量 -->
          <el-table-column width="104" align="left" label="车辆数量" prop="num">
            <!-- <template v-slot="{ row }">
                <span>{{ row.name }}</span>
              </template> -->
          </el-table-column>

          <!-- 应载重量 -->
          <el-table-column
            align="left"
            width="157"
            label="应载重量(吨)"
            prop="allowableLoad"
          >
            <!-- <template v-slot="{ row }">
                <span>{{ row.name }}</span>
              </template> -->
          </el-table-column>

          <!-- 应载体积 -->
          <el-table-column
            align="left"
            width="150"
            label="应载重量(立方米)"
            prop="allowableVolume"
          >
            <!-- <template v-slot="{ row }">
                <span>{{ row.name }}</span>
              </template> -->
          </el-table-column>

          <!-- 长 -->
          <el-table-column
            align="left"
            width="100"
            label="长(米)"
            prop="measureLong"
          >
            <!-- <template v-slot="{ row }">
                <span>{{ row.name }}</span>
              </template> -->
          </el-table-column>

          <!-- 宽 -->
          <el-table-column
            align="left"
            width="100"
            label="宽(米)"
            prop="measureWidth"
          >
            <!-- <template v-slot="{ row }">
                <span>{{ row.name }}</span>
              </template> -->
          </el-table-column>

          <!-- 高 -->
          <el-table-column
            align="left"
            width="100"
            label="高(米)"
            prop="measureHigh"
          >
            <!-- <template v-slot="{ row }">
                <span>{{ row.name }}</span>
              </template> -->
          </el-table-column>

          <!-- 操作 -->
          <el-table-column align="center" label="操作">
            <template v-slot="{ row }">
              <el-button size="mini" type="text" @click="editCarType(row.id)">编辑</el-button>
              <span style="margin: 0 5px 0 5px ;color: #c1c1c1 ;">|</span>
              <el-button size="mini" type="text" style="color:red;" @click="delCarType(row.id)"> 删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination
          align="center"
          :current-page="page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
    <!-- 对话框 -->
    <el-dialog :title="`${showTitle}车型`" :visible.sync="showDialog" width="580px" @close="btnCancel">
      <el-row type="flex" justify="center">
        <el-form
          ref="carTypeForm"
          :model="carTypeForm"
          :rules="rules"
          size="small"
          label-position="right"
          label-width="80px"
        >
          <el-form-item label="车辆类型" prop="name">
            <el-input
              v-model.number="carTypeForm.name"
              placeholder="请输入车辆类型"
              autocomplete="off"
              style="width: 380px"
            />
          </el-form-item>

          <el-form-item label="应载重量" prop="allowableLoad">
            <el-input
              v-model.number="carTypeForm.allowableLoad"
              placeholder="请输入应载重量"
              autocomplete="off"
              style="width: 380px"
            >
              <i slot="suffix" class="unit">吨</i>
            </el-input>
          </el-form-item>

          <el-form-item label="应载体积" prop="allowableVolume">
            <el-input
              v-model.number="carTypeForm.allowableVolume"
              placeholder="请输入应载体积"
              autocomplete="off"
              style="width: 380px"
            >
              <i slot="suffix" class="unit">立方</i>
            </el-input>
          </el-form-item>

          <el-form-item label="长" prop="measureLong">
            <el-input v-model.number="carTypeForm.measureLong" autocomplete="off" style="width: 380px">
              <i slot="suffix" class="unit">米</i>
            </el-input>
          </el-form-item>

          <el-form-item label="宽" prop="measureWidth">
            <el-input v-model.number="carTypeForm.measureWidth" autocomplete="off" style="width: 380px">
              <i slot="suffix" class="unit">米</i>
            </el-input>
          </el-form-item>

          <el-form-item label="高" prop="measureHigh">
            <el-input v-model.number="carTypeForm.measureHigh" autocomplete="off" style="width: 380px">
              <i slot="suffix" class="unit">米</i>
            </el-input>
          </el-form-item>
        </el-form>
      </el-row>

      <div slot="footer" class="dialog-footer" style="transform: translateY(-30px);">
        <el-row type="flex" justify="center">
          <el-button type="primary" size="medium" style="background-color: #e15536; border: none;" @click="btnOK">确 定</el-button>
          <el-button size="medium " @click="btnCancel">取 消</el-button>
        </el-row>
      </div>
    </el-dialog>
  </div>
  <!-- #e15536 -->
</template>

<script>
import { addCarModels, delCarModels, editCarModels, getCarModels, getCarModelsDetail, getCarModelsList } from '@/api/cheManagement'
export default {
  name: 'CheHangManagement',
  data() {
    return {
      showDialog: false, // 对话框显示状态
      // 新增车型对象
      carTypeForm: {
        name: '', // 车辆类型名称
        allowableLoad: '', // 准载重量
        allowableVolume: '', // 准载体积
        measureLong: '', // 长
        measureWidth: '', // 宽
        measureHigh: '', // 高
        id: null,
        num: null, // 车型数量
        goodsTypes: [] // 货物类型信息
      },
      // 搜素
      // 应载重量
      allowableLoadList: [{
        value: 'RANGE_LEVEL_1',
        name: '<1.8（吨）'
      },
      {
        value: 'RANGE_LEVEL_2',
        name: '1.8-6（吨）'
      },
      {
        value: 'RANGE_LEVEL_3',
        name: '6-14（吨）'
      },
      {
        value: 'RANGE_LEVEL_4',
        name: '14-30（吨）'
      },
      {
        value: 'RANGE_LEVEL_5',
        name: '30-50（吨）'
      },
      {
        value: 'RANGE_LEVEL_6',
        name: '50-100（吨）'
      },
      {
        value: 'RANGE_LEVEL_7',
        name: '100>（吨）'
      }],
      allowableVolumeList: [{
        value: 'RANGE_LEVEL_1',
        name: '<3（m³）'
      },
      {
        value: 'RANGE_LEVEL_2',
        name: '3-5（m³）'
      },
      {
        value: 'RANGE_LEVEL_3',
        name: '5-10（m³）'
      },
      {
        value: 'RANGE_LEVEL_4',
        name: '10-15（m³）'
      },
      {
        value: 'RANGE_LEVEL_5',
        name: '15-30（m³）'
      },
      {
        value: 'RANGE_LEVEL_6',
        name: '30-50（m³）'
      },
      {
        value: 'RANGE_LEVEL_7',
        name: '50-80（m³）'
      },
      {
        value: 'RANGE_LEVEL_8',
        name: '80-150（m³）'
      },
      {
        value: 'RANGE_LEVEL_9',
        name: '150>（m³）'
      }], // 应载体积
      allowableLoad: '', // 应载重量
      allowableVolume: '', // 应载体积
      id: null, // 车型编号
      name: '', // 车型类型
      // 分页
      page: 1, // 当前页码
      pageSize: 10, // 页码大小
      counts: 1, // 总页数
      list: [], //  获取车型列表
      // 新增车型表单校验
      rules: {
        // 车辆类型名称
        name: [
          { required: true, message: '车型名称不能为空', trigger: 'blur' },
          {
            trigger: 'blur',
            // 自定义校验模式
            validator: async(rule, value, callback) => {
              // value就是输入的编码
              const res = await getCarModelsList()
              // result数组中是否存在 value值
              // if (data.data.some((item) => item.code === value)) { // 新增
              if (res.some((item) => item.name === value && this.carTypeForm.id !== item.id)) { // 编辑
                callback(new Error('车辆类型已存在'))
              } else {
                callback()
              }
            }
          }
        ],
        allowableLoad: [
          // 准载重量
          { required: true, message: '应载重量不能为空', trigger: 'blur' },
          { type: 'number', message: '应载重量必须为数字值', trigger: 'blur' }
        ],
        allowableVolume: [
          // 准载体积
          { required: true, message: '在管面积不能为空', trigger: 'blur' },
          { type: 'number', message: '在管面积必须为数字值', trigger: 'blur' }
        ],
        measureLong: [{ type: 'number', message: '长度必须为数字值', trigger: 'blur' }],
        measureWidth: [{ type: 'number', message: '宽度必须为数字值', trigger: 'blur' }],
        measureHigh: [{ type: 'number', message: '高度度必须为数字值', trigger: 'blur' }]
      }
    }
  },
  computed: {
    showTitle() {
      return this.carTypeForm.id ? '编辑' : '新增'
    }
  },
  created() {
    this.getCarModels()
  },
  methods: {
    // 获取车辆类型信息列表
    async getCarModels() {
      const res = await getCarModels({ page: this.page, pageSize: this.pageSize })
      this.list = res.items
      this.counts = parseInt(res.counts) // 转数字类型
      this.page = res.page
      this.pageSize = res.pageSize
    },
    // 分页
    // 每页大小改变触发
    handleSizeChange(newPageSize) {
      this.pageSize = newPageSize
      this.getCarModels()
    },
    // 当前页改变触发
    handleCurrentChange(newPage) {
      this.page = newPage
      this.getCarModels()
    },
    // 搜索
    async search() {
      const res = await getCarModels({ allowableLoad: this.allowableLoad, allowableVolume: this.allowableVolume, id: this.id, name: this.name, page: this.page, pageSize: this.pageSize })
      this.counts = parseInt(res.counts) // 转数字类型
      this.page = res.page
      this.pageSize = res.pageSize
      this.list = res.items
    },
    // 重置
    reset() {
      this.id = null
      this.name = ''
      this.allowableLoad = ''
      this.allowableVolume = ''
    },
    // 删除
    delCarType(id) {
      this.$confirm('是否永久删除该数据?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delCarModels(id)
        // 判断能不能删除成功
        this.$message.success('删除成功')
        this.getCarModels()
      }).catch(() => {})
    },
    // 编辑
    async editCarType(id) {
      this.showDialog = true // 显示对话框
      this.carTypeForm.id = id // 赋值id
      const res = await getCarModelsDetail(id) // 获取车型详情
      // console.log(res)
      this.carTypeForm = res // 表单回填
    },
    // 表单确定
    async btnOK() {
      await this.$refs.carTypeForm.validate() // 表单校验 carTypeForm
      if (this.showTitle === '新增') {
        await addCarModels(this.carTypeForm)
      } else if (this.showTitle === '编辑') {
        await editCarModels(this.carTypeForm)
      }
      this.$message.success('操作成功')
      this.$refs.carTypeForm.resetFields()
      this.showDialog = false
      this.getCarModels()
    },
    // 表单取消
    btnCancel() {
      this.$refs.carTypeForm.resetFields()
      this.showDialog = false
      setTimeout(() => {
        this.carTypeForm.id = null
      }, 500)
    }
  }
}
</script>

<style lang='scss'  scoped>
.carriaGe-container {
  padding-left: 20px;
  padding-right: 20px;
  background-color: #f4f6f8;
  .unit {
    font-size: 14px;
    color: black;
    margin-right: 5px;
  }
  .head-container {
    // height: 140px;
    // .box-card {
    //   .serial-number {
    //   }
    //   .weight {
    //   }
    //   .bulk {
    //   }
    //   .car-type {
    //   }
    // }
  }
  .car-models {
    .box-card {
      margin-top: 20px;
    }
    .text {
      font-size: 14px;
    }
  }
}
</style>

